<template>
    <div class="privacyPolicy">
        <div class='moduleHead'>
            <span @click="$router.back()" class="back"></span>
            <span>{{language.privacyPolicy_title}}</span>
        </div>
        <div class="body">
            <div class="body_html" v-html="bodyHtml" ref="body"></div>
            <loading :props="{show:loadingPage}"></loading>
        </div>
    </div>
</template>
<script>
import * as API from '../api'
import loading from './Loading'

export default {
    name: 'privacyPolicy',

    components: {
        loading,
    },

    data() {
        return {
            loadingPage: true,
            bodyHtml: '',
        }
    },

    created() {
        this.getPrivacy();
    },

    methods: {

        setIsAgree(){
            var bool = parseInt(Unit.getSessionStorage('ms_agree'));
            if(bool == 1){
                this.showAgreeImg();
            }
        },

        showAgreeImg(state){
            var domA = this.$refs.body.getElementsByTagName('a'),
                imgDom;
            for (var i = 0; i < domA.length; i++) {
                if (domA[i].getAttribute('id') == 'pp_close_button') {
                    imgDom = domA[i].getElementsByTagName('img');
                    for(var x = 0; x < imgDom.length; x++){
                        if (imgDom[x].getAttribute('id') == 'icon_agreement_checked') {
                            imgDom[x].style.display = 'block';
                        }else if (imgDom[x].getAttribute('id') == 'icon_agreement_not_checked') {
                            imgDom[x].style.display = 'none';
                        }
                    }
                }
            }
        },

        getPrivacy() {
            let tthis = this;
            API.privacy_policy({
                success: function(result) {
                    tthis.bodyHtml = result.match(/<body.*>([^]*)<\/body>/)[1];
                    setTimeout(function() {
                        var domA = tthis.$refs.body.getElementsByTagName('a');
                        for (var i = 0; i < domA.length; i++) {
                            var href = domA[i].getAttribute('href');
                            if (href.indexOf('service_agreement') > -1) {
                                domA[i].setAttribute('href', 'javascript:void(0)');
                                domA[i].setAttribute('type', 'service_agreement');
                            }
                        }
                        tthis.bindEvt();
                        tthis.setIsAgree();
                    }, 100);
                },
                complete: function() {
                    tthis.loadingPage = false;
                }
            })
        },

        bindEvt() {
            var tthis = this,
                domA = this.$refs.body.getElementsByTagName('a');
            for (var i = 0; i < domA.length; i++) {
                if (domA[i].getAttribute('id') == 'pp_close_button') {
                    domA[i].onclick = function() {
                        tthis.showAgreeImg();
                        if (!Unit.getCookie('client_key') || !Unit.getSessionStorage("ms_myself")) {
                            tthis.$router.back();
                        } else {
                            tthis.$router.push({
                                name: 'agreeServicePrivacy'
                            })
                        }
                    };
                } else if (domA[i].getAttribute('type') == 'service_agreement') {
                    domA[i].onclick = function() {
                        tthis.$router.push({
                            name: 'serviceAgreement'
                        });
                    };
                }
            }
        }
    },
}

</script>
<style>
.privacyPolicy.page {
    background: #fff;
    padding-top: 44px;
}

.privacyPolicy.page .body_html {
    padding: 20px 20px 10px;
    font-size: 14px;
    font-family: 'Times New Roman', Times, serif;
    color: inherit;
    background: #fff;
}

.privacyPolicy.page .body_html p,
.privacyPolicy.page .body_html h4,
.privacyPolicy.page .body_html h3 {
    font-family: 'Times New Roman', Times, serif;
    margin: 16px 0;
    line-height: 16px;
}

.privacyPolicy.page .body_html a {
    color: #261CDC;
}

</style>
